<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 清除一下默认样式 */
        *{
            margin: 0;
            padding: 0;
        }
        /* 鼠标 放上去时  */
        p:hover{
            color: red;
        }
        ul{

            /* 清除  ul 前边的  项目符号 */
            list-style: none;
        }
        a{
            /* 清除下划线 */
            text-decoration: none;
        }
        .side{
            width: 140px;
            height: 400px;
            background-color: gray;
        }

        .side-item{
            /* 块级元素而言 ,不写宽度,宽度默认是 父元素的 100%  */
            height: 40px;
            line-height: 40px;
            color: #fff;
            text-indent: 20px;
        }
        .side-item a{
            color: #fff;
        }
        .side-item:hover{
            background-color: orange;
        }
    </style>
</head>
<body>
    <p>不凡学院</p>

    <ul class="side">
        <li class="side-item">
            <a href="">手机 电话卡</a>
        </li>
        <li class="side-item">
            <a href="">手机 电话卡</a>
        </li>
        <li class="side-item">
            <a href="">手机 电话卡</a>
        </li>
        <li class="side-item">
            <a href="">手机 电话卡</a>
        </li>
    </ul>
</body>
</html>